<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <title>MyCAT EYE-mycat cluster</title>
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" title="" rel="stylesheet" />
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/jquery.mloading.css" />
    <link title="blue" href="css/dermadefault.css" rel="stylesheet" type="text/css" />
    <link title="green" href="css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled" />
    <link title="orange" href="css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled" />
    <link href="css/templatecss.css" rel="stylesheet" title="" type="text/css" />
    <link href="css/jquery.dataTables.min.css" rel="stylesheet" title="" type="text/css" />
    <link title="" href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <nav class="nav navbar-default navbar-mystyle navbar-fixed-top">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand mystyle-brand"><span class="glyphicon glyphicon-home"></span></a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="">
                    <a class="mystyle-color" href="../index.html">MyCAT EYE&nbsp;&nbsp;&nbsp;</a>
                </li>
            </ul>
            <ul class="nav navbar-nav pull-right">
                <li class="dropdown" style="min-width:165px;">
					<a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;当前Mysql：
						<span id="currentServerId" data-value="">所属节点</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu" id="ulNodeList">
						<li class="dropdown-item"><a class="dropdown-item" data-name="所属节点" data-value="">所属节点</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;当前Mycat：
						<span id="mycat_server" data-value="">所属节点</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu" id="ulMycatList">
						<li class="dropdown-item"><a class="dropdown-item" data-name="所属节点" data-value="">所属节点</a></li>
					</ul>
				</li>
                <li class="dropdown li-border">
                    <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">
                        &nbsp;<span id="login_admin"></span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:void(0)" id="modifyPassword">修改密码</a></li>
                        <li><a href="javascript:void(0)" id="logout">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <div class="down-main">
        <div class="left-main left-full">
            <div class="sidebar-fold">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
            </div>
            <div class="subNavBox">
                <div class="sBox">
                    <div class="subNav sublist-down">
                        <span class="title-icon fa fa-angle-down"></span><span
                            class="sublist-title">常用功能</span>
                    </div>
                    <ul class="navContent">
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />控制台
                            </div>
                            <a href="dashboard.html">
                                <span class="sublist-icon fa fa-dashboard"></span>
                                <span class="sub-title">控制台</span>
                            </a>
                        </li>
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />变量管理
                            </div>
                            <a href="var-manage.html">
                                <span class="sublist-icon fa fa-dot-circle-o"></span>
                                <span class="sub-title">变量管理</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="sBox">
                    <div class="subNav sublist-down">
                        <span class="title-icon fa fa-angle-down"></span>
                        <span class="sublist-title">InnoDB引擎</span>
                    </div>
                    <ul class="navContent">
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />基本状态
                            </div>
                            <a href="innodb-status.html">
                                <span class="sublist-icon fa fa-heartbeat"></span>
                                <span class="sub-title">基本状态</span>
                            </a>
                        </li>
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />事务查看
                            </div>
                            <a href="innodb-trx.html">
                                <span class="sublist-icon fa fa-retweet"></span>
                                <span class="sub-title">事务查看</span>
                            </a>
                        </li>
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />锁等待信息
                            </div>
                            <a href="innodb-lockwaits.html">
                                <span class="sublist-icon fa fa-lock"></span>
                                <span class="sub-title">锁等待信息</span></a>
                        </li>
                    </ul>
                </div>
                <div class="sBox">
                    <div class="subNav sublist-down">
                        <span class="title-icon fa fa-angle-down"></span>
                        <span class="sublist-title">Mysql管理</span>
                    </div>
                    <ul class="navContent">
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />Mysql集群管理
                            </div>
                            <a href="cluster-manage.html">
                                <span class="sublist-icon fa fa-list"></span>
                                <span class="sub-title">Mysql集群管理</span>
                            </a>
                        </li>
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />Mysql节点管理
                            </div>
                            <a href="node-manage.html">
                                <span class="sublist-icon fa fa-cubes"></span>
                                <span class="sub-title">Mysql节点管理</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="sBox">
                    <div class="subNav sublist-down">
                        <span class="title-icon fa fa-angle-down"></span>
                        <span class="sublist-title">Mycat管理</span>
                    </div>
                    <ul class="navContent">
                        <li class="active">
                            <div class="showtitle">
                                <img src="img/leftimg.png" />Mycat集群管理
                            </div>
                            <a href="mycat-cluster.html">
                                <span class="sublist-icon fa fa-database"></span>
                                <span class="sub-title">Mycat集群管理</span>
                            </a>
                        </li>
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />Mycat节点管理
                            </div>
                            <a href="mycat-node.html">
                                <span class="sublist-icon fa fa-cube"></span>
                                <span class="sub-title">Mycat节点管理</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="sBox">
                    <div class="subNav sublist-down">
                        <span class="title-icon fa fa-angle-down"></span>
                        <span class="sublist-title">设置</span>
                    </div>
                    <ul class="navContent">
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />系统属性
                            </div>
                            <a href="mycat-setting-myid.html">
                                <span class="sublist-icon fa fa-ban"></span>
                                <span class="sub-title">系统属性</span>
                            </a>
                        </li>
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />参数配置
                            </div>
                            <a href="mycat-setting-server.html">
                                <span class="sublist-icon fa fa-list-alt"></span>
                                <span class="sub-title">参数配置</span>
                            </a>
                        </li>
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />数据源设置
                            </div>
                            <a href="mycat-setting-schema.html">
                                <span class="sublist-icon fa fa-cloud"></span>
                                <span class="sub-title">数据源设置</span>
                            </a>
                        </li>
                        <li>
                            <div class="showtitle">
                                <img src="img/leftimg.png" />分片设置
                            </div>
                            <a href="mycat-setting-rule.html">
                                <span class="sublist-icon fa fa-share"></span>
                                <span class="sub-title">分片设置</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="right-product right-full">
            <div class="container-fluid">
                <div class="info-center">
                    <div class="page-header">
                        <div class="pull-left">
                            <h4>集群管理</h4>
                        </div>
                        <div class="pull-right mt10">
                            <button class="btn btn-info btn-add" id="btn-add">新增集群</button>
                        </div>
                    </div>

                    <div class="panel panel-default panel-intro table-margin">
                        <div class="panel-body">
                            <div class="tab-content">
                                <div class="tab-pane fade active in" id="one">
                                    <div class="widget-body no-padding">
                                        <div class="table-responsive no-padding">
                                            <table class="table table-striped" id="mycatTable">
                                                <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>名称</th>
                                                        <th>主机</th>
                                                        <th>端口</th>
                                                        <th>操作</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增|编辑弹出框 -->
    <div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel"><span>新增</span>集群</h5>
                    <button type="button" class="fa fa-close close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="hidden" value="" id="id" name="id" />
                        <div class="form-group row">
                            <label for="clusterName" class="col-xs-12 col-sm-3 col-form-label text-right">名称：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input class="form-control" type="text" value="" id="clusterName">
                                <p class="text-danger fade" role="clusterName">名称不可为空</p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="clusterHost" class="col-xs-12 col-sm-3 col-form-label text-right">主机：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input class="form-control" type="text" value="" id="clusterHost">
                                <p class="text-danger fade" role="clusterHost">主机不可为空</p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="clusterPort" class="col-xs-12 col-sm-3 col-form-label text-right">端口：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input class="form-control" type="number" value="" id="clusterPort">
                                <p class="text-danger fade" role="clusterPort">端口必须大于0</p>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-info btn-submit">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- javascript -->
    <script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="script/jquery.cookie.js" type="text/javascript"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="script/bootbox.min.js" type="text/javascript"></script>
    <script src="script/jquery.dataTables.min.js"></script>
    <!-- loading效果 -->
    <script src="script/jquery.mloading.js"></script>
    <!-- 自定义javascript -->
    <script src="script/custom/menu.js"></script>
    <script src="script/custom/login-auth.js"></script>
    <script src="script/custom/modify-password.js"></script>
    <script src="script/custom/current-node.js"></script>
    <script src="../assets/js/utils.js"></script>
    <script type="text/javascript">
        // list
        var table;
        function fetchData() {
            if(table){
                table.destroy();
            }
            table = $('#mycatTable').DataTable({
                'oLanguage': dtb.oLanguage,
                'ajax': '/mycat/cluster/list',
                'columns': [
                    {'data': 'id'},
                    {'data': 'clusterName'},
                    {'data': 'clusterHost'},
                    {'data': 'clusterPort'}
                ],
                'columnDefs': [
                    {
                        'render': function(data,type,row){
                            //console.log(row['id'])
                            return '<a href="javascript:void(0)" class="btn-del text-info" data-id="'+row['id']+'"><i class="fa fa-trash-o"></i> 删除</a> ' +'| <a href="javascript:void(0)" class="btn-edit text-info" data-id="'+row['id']+'"><i class="fa fa-edit"></i> 编辑</a>'
                                + String.format('| <a href="./mycat-setting-mycat-data-host.html?cluster={1}" class=" text-info" data-id="{0}"><i class="fa fa-edit"></i> 管理DataHost</a>',  row['id'], row["clusterName"])
                                + String.format('| <a href="./mycat-setting-mycat-data-node.html?cluster={1}" class=" text-info" data-id="{0}"><i class="fa fa-edit"></i> 管理DataNode</a>',  row['id'], row["clusterName"])
                                + String.format('| <a href="./mycat-setting-mycat-schema.html?cluster={1}" class=" text-info" data-id="{0}"><i class="fa fa-edit"></i> 管理Schema</a>',  row['id'], row["clusterName"])   ;
                        },
                        'targets': 4
                    }
                ]
            });
        }
        fetchData();

        // 模态框
        var myModal = $('#myModal');

        // 新增
        $("#btn-add").on("click",function(e){
            var btn = $(e.currentTarget);
            myModal.modal('show');
            myModal.find('.form-control').val('');
            myModal.find('#id').val('');
        });

        // 编辑
        $("#mycatTable").on("click",".btn-edit",function(e){
            var btn = $(e.currentTarget);
            var id = btn.data('id');
            myModal.find('.form-control').val('');
            myModal.find('#id').val(id);
            $.ajax({
                url: '/mycat/cluster/detail/'+id,
                method: 'GET',
                success: function (res) {
                    console.log(res);
                    if(res.code && res.code==200) {
                        myModal.modal('show');
                        myModal.find('#clusterName').val(res.data['clusterName']);
                        myModal.find('#clusterHost').val(res.data['clusterHost']);
                        myModal.find('#clusterPort').val(res.data['clusterPort']);
                    }else{
                        notifi.error('Error: '+res.message);
                    }
                },
                error: function (err) {
                    console.log(err);
                    notifi.error(err || err.message? err.message:'');
                }
            });
        });

        // 保存
        myModal.on('click','.btn-submit',function(e){
            var id = $('#id').val();
            var clusterName = $('#clusterName');
            var clusterHost = $('#clusterHost');
            var clusterPort = $('#clusterPort');
            if(clusterName.val() == ''){
                clusterName.next('p').removeClass('fade');
                return;
            }else{
                clusterName.next('p').addClass('fade');
            }

            var param = {
                "clusterName": clusterName.val(),
                "clusterHost": clusterHost.val(),
                "clusterPort": clusterPort.val()
            };
            var url = '/mycat/cluster/detail';
            var method = 'POST';
            if(id != ''){
                url += '/' + id;
                method = 'PUT';
                param.id = id;
            }
            $.ajax({
                url: url,
                method: method,
                data: JSON.stringify(param),
                dataType: 'json',
                contentType:'application/json; charset=UTF-8',
                success: function(res, status,jqxhr){
                    console.log(res);
                    if(res.code && res.code==200){
                        myModal.modal('hide');
                        fetchData();
                    }else{
                        notifi.error('Error: '+res.message)
                    }
                },
                error: function(err,status){
                    console.log(err);
                    notifi.error(err || err.message? err.message:'');
                }
            });
        });

        // 删除
        $("#mycatTable").on("click",".btn-del",function(e) {
            var btn = $(e.currentTarget);
            var id = btn.data('id');
            if(confirm('确定删除集群'+id+'?')){
                $.ajax({
                    url: '/mycat/cluster/detail/'+id,
                    method: 'DELETE',
                    success: function(res, status,jqxhr){
                        console.log(res);
                        if(res.code && res.code==200){
                            fetchData();
                        }else{
                            notifi.error('Error: '+res.message)
                        }
                    },
                    error: function(err,status){
                        console.log(err);
                        notifi.error(err || err.message? err.message:'');
                    }
                });
            }
        });
    </script>
</body>
</html>
